<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>service</title>

    <style>
        .avatar-uploader .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }

        .avatar-uploader .el-upload:hover {
            border-color: #409EFF;
        }

        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 178px;
            height: 178px;
            margin-top: 60%;
            text-align: center;
        }

        .avatar {
            width: 178px;
            height: 178px;
            display: block;
        }
    </style>


    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue-resource@1.5.0"></script>


    <script>
        window.onload = function () {
            var vm = new Vue({
                el: '#app',
                data: {
                    imageUrl: '',
                    imageUrl2: '',
                    Image: '',
                    companies: [{
                        value: 2,
                        label: 'yige'
                    }, {
                        value: 3,
                        label: 'fuyou'
                    }, {
                        value: 4,
                        label: 'qinyu'
                    }, {
                        value: 5,
                        label: 'xiaoying'
                    }],
                    serviceTable: {
                        tableData: [{
                            id: 1,
                            name: 'haha',
                            price: 12,
                            company: 'myCompany',
                            pic: 'pic1',

                        }, {}],
                    },
                    searchForm: {
                        name: '',
                    },
                    addForm: {
                        visible: false,
                        name: '',
                        price: '',
                        pic: '',
                        company: ''
                    },
                    editForm: {
                        visible: false,
                        name: '',
                        pic: '',
                        price: '',
                        company: ''
                    }
                },
                methods: {
                    showEditForm: function (index) {
                        this.editForm.id = this.serviceTable.tableData[index].id;
                        this.editForm.visible = true;
                        this.editForm.name = this.serviceTable.tableData[index].name;
                        this.editForm.price = this.serviceTable.tableData[index].price;
                        this.editForm.company = this.serviceTable.tableData[index].company;
                        this.imageUrl2 = this.serviceTable.tableData[index].photo;
                    },
                    addService: function () {
                        if (this.addForm.price == '' || this.addForm.company == '' || this.addForm.name == '') {
                            alert("输入不能为空！")
                        }
                        else {
                            var url = '/addservice';
                            this.$http.post(url, {
                                name: this.addForm.name,
                                price: this.addForm.price,
                                company: this.addForm.company,
                                pic: this.addForm.pic
                            }).then(function (res) {
                                //    清空
                                this.addForm.name = '';
                                this.addForm.company = '';
                                this.addForm.price = '';
                                this.imageUrl = '';
                                this.addForm.visible = false;
                                this.search();
                            }, function (res) {
                                alert("数据格式错误！");
                            });
                        }
                    },
                    search: function (name) {
                        if (name == '' || name == undefined) {
                            var url = '/selectservice';
                        }
                        else {
                            var url = '/selectservicebycondition';
                        }
                        this.$http.post(url, {
                            name: this.searchForm.name
                        }).then(function (res) {
                            this.serviceTable.tableData = [];
                            console.log(res.body[0]);

                            for (var i = 0; res.body[i]; i++) {
                                this.serviceTable.tableData.push({
                                    id: res.body[i].id,
                                    name: res.body[i].name,
                                    price: res.body[i].price,
                                    company: res.body[i].company,
                                    pic: res.body[i].pic
                                });
                            }
                        })
                    },
                    update: function () {
                        if (this.editForm.price == '' || this.editForm.company == '' || this.editForm.name == '') {
                            alert("输入不能为空！")
                        }
                        else {
                            var url = '/editservice';
                            this.$http.post(url, {
                                id: this.editForm.id,
                                name: this.editForm.name,
                                price: this.editForm.price,
                                company: this.editForm.company,
                                pic: this.editForm.pic
                            }, {
                                emulateJson: true
                            }).then(function (res) {
                                this.editForm.visible = false;
                                this.search();
                            }, function (res) {
                                alert('数据格式错误！');
                            });
                        }
                    },
                    handleAvatarSuccess1: function (res, file) {
                        this.imageUrl = URL.createObjectURL(file.raw);
                        this.addForm.pic = res;
                        this.Image = res;
                    },
                    handleAvatarSuccess2: function (res, file) {
                        this.imageUrl2 = URL.createObjectURL(file.raw);
                        this.editForm.pic = res;
                        this.Image = res;
                    }
                    ,
                    beforeAvatarUpload: function (file) {
                        this.imageUrl = "";
                        this.imageUrl2 = "";
                        const isJPG = file.type === 'image/jpeg';
                        const isPNG = file.type === 'image/png';
                        const isLt2M = file.size / 1024 / 1024 < 2;
                        if (!(isJPG || isPNG)) {
                            this.$message.error('上传头像图片只能是 JPG/PNG 格式!');
                        }
                        if (!isLt2M) {
                            this.$message.error('上传头像图片大小不能超过 2MB!');
                        }
                        return isJPG && isLt2M;
                    },
                }
            });
            vm.search();
        }
    </script>
</head>
<body>
<div id="app">
    <!--搜索form-->
    <div id="searchForm">
        <el-form :inline="true" :model="searchForm">
            <el-form-item label="服务名称">
                <el-input v-model="searchForm.name" placeholder="服务名称"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button @click="search(searchForm.name)" type="primary">查询</el-button>
                <el-button @click="addForm.visible=true;" type="info">添加</el-button>
            </el-form-item>
        </el-form>
    </div>
    <!--表格-->
    <div id="serviceTable">
        <el-table :data="serviceTable.tableData" style="width: 100%;" border max-height="600">
            <el-table-column prop="id" label="id" width="50"></el-table-column>
            <el-table-column prop="name" label="服务名称" min-width="50"></el-table-column>
            <el-table-column prop="price" label="价格" width="50"></el-table-column>
            <el-table-column prop="company" label="所属公司" width="50"></el-table-column>
            <el-table-column prop="pic" label="图片" width="150"></el-table-column>
            <el-table-column
                    label="照片"
                    width="200">
                <template slot-scope="scope">
                    <div></div>
                    <img :src="Image"/>
                </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" min-width="50">
                <template slot-scope="scope">
                    <el-button @click="showEditForm(scope.$index)" type="text" size="medium">编辑</el-button>
                </template>
            </el-table-column>

        </el-table>
    </div>
    <!--点击添加弹出的form-->
    <div id="addForm">
        <el-dialog title="添加服务项" :visible.sync="addForm.visible">
            <!--表单照片，输入-->
            <el-row>
                <el-col :span="12">
                    <!--照片-->
                    <el-upload
                            class="avatar-uploader"
                            action="/uploadimg"
                            :show-file-list="false"
                            :on-success="handleAvatarSuccess1"
                            :before-upload="beforeAvatarUpload">
                        <img v-if="imageUrl" :src="imageUrl" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-col>
                <el-col :span="12">
                    <!--输入框-->
                    <el-form :model="addForm">
                        <el-row>
                            <el-col :span="24">
                                <el-form-item label="名称">
                                    <el-input v-model="addForm.name"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="24">
                                <el-form-item label="价格">
                                    <el-input v-model="addForm.price"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="24">
                                <el-form-item label="所属公司">
                                    <!--<el-input v-model="addForm.company"></el-input>-->
                                    <el-select v-model="addForm.company" placeholder="请选择">
                                        <el-option
                                                v-for="item in companies"
                                                :key="item.value"
                                                :label="item.label"
                                                :value="item.value">
                                            <span style="float: left">{{ item.label }}</span>
                                            <span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span>
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                </el-col>
            </el-row>
            <!--按钮-->
            <el-row>
                <el-col :span="24">
                    <div style="float:right">
                        <el-button @click="addService" type="primary">确认</el-button>
                        <el-button @click="addForm.visible=false;" type="info">取消</el-button>
                    </div>
                </el-col>
            </el-row>
        </el-dialog>
    </div>
    <!--点击编辑弹出来的form--同添加-->
    <div id="editForm">
        <el-dialog width="50%" title="编辑服务项" :visible.sync="editForm.visible">
            <!--表单照片，输入-->
            <el-row>
                <el-col :span="12">
                    <!--照片-->
                    <el-upload class="avatar-uploader"
                               action="/uploadimg"
                               :show-file-list="false"
                               :on-success="handleAvatarSuccess2"
                               :before-upload="beforeAvatarUpload">
                        <img v-if="imageUrl2" :src="imageUrl2" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-col>
                <el-col :span="12">
                    <!--输入框-->
                    <el-form :model="editForm">
                        <el-row>
                            <el-col :span="24">
                                <el-form-item label="名称">
                                    <el-input v-model="editForm.name"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="24">
                                <el-form-item label="价格">
                                    <el-input v-model="editForm.price"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="24">
                                <el-form-item label="所属公司">
                                    <!--<el-input v-model="editForm.company"></el-input>-->
                                    <el-select v-model="editForm.company" placeholder="请选择">
                                        <el-option
                                                v-for="item in companies"
                                                :key="item.value"
                                                :label="item.label"
                                                :value="item.value">
                                            <span style="float: left">{{ item.label }}</span>
                                            <span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span>
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                </el-col>
            </el-row>
            <!--按钮-->
            <el-row>
                <el-col :span="24">
                    <div style="float:right">
                        <el-button @click="update" type="primary">确认</el-button>
                        <el-button @click="editForm.visible=false;" type="info">取消</el-button>
                    </div>
                </el-col>
            </el-row>
        </el-dialog>
    </div>

</div>
</body>
</html>